<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>校园交流平台</title>
    <link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon" />
    <script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
    <!-- 引入vuejs -->
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <!-- 引入element样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入element组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <!--模板通用css-->
    <link rel="stylesheet" href="css/common.css">
</head>
<body>
    <el-container id="app" v-cloak>
            <div th:replace="fragment/common::header"></div>
            <div class="pad"></div>
            <el-card class="card">
                <el-row>
                    <el-col :span="6"><h1 style="color:#303133">个人资料</h1></el-col>
                </el-row>
                <el-divider></el-divider>
                <el-row>
                    <el-col :span="5" :offset="1">头像</el-col>
                    <el-col :span="6">
                        <div class="headdiv">
                            <img :src="userInfo.imgPath" width="85px" height="85px">
                        </div>
                    </el-col>
                </el-row>
                <el-divider></el-divider>
                <el-row>
                    <el-col :span="5" :offset="1">用户名</el-col>
                    <el-col :span="12">
                        <el-input v-model="userInfo.userName" maxlength="20" :disabled="true" placeholder="用户名"></el-input>
                    </el-col>
                </el-row>
                <el-divider></el-divider>
                <el-row>
                    <el-col :span="5" :offset="1">微信号</el-col>
                    <el-col :span="12">
                        <el-input v-model="userInfo.weixin" maxlength="100" :disabled="true" placeholder="微信号"></el-input>
                    </el-col>
                </el-row>
                <el-divider></el-divider>
                <el-row>
                    <el-col :span="5" :offset="1">分院</el-col>
                    <el-col :span="12">
                        <el-input v-model="userInfo.fy" maxlength="100" :disabled="true" placeholder="分院"></el-input>
                    </el-col>
                </el-row>
                <el-divider></el-divider>
                <el-row>
                    <el-col :span="5" :offset="1">个人介绍</el-col>
                    <el-col :span="12">
                        <el-input type="textarea" maxlength="200" :rows="2" v-model="userInfo.info" :disabled="true" placeholder="个人介绍"></el-input>
                    </el-col>
                </el-row>
            </el-card>

        
    </el-container>
    <script th:inline="javascript">
        new Vue({
            el:'#app',
            data(){
                return{
                	activeIndex: '',
                    userName:'张三 ',
                    userInfo:{}
                }
            },
            created:function(){
            	this.userName=[[${session.userName}]];
            	var name=[[${name}]];
            	this.getUserInfoByName(name);
            },
            methods:{
            	//选择nav选项
            	handleSelect(key, keyPath){
                    switch(key){
                    case '1':
                    	window.location.href="index";
                    	break;
                    case '2':
                    	window.location.href="forum";
                        break;
                    case '3':
                    	window.location.href="blog";
                        break;
                    case '4-1':
                        window.location.href="http://www.dl-city.com/";
                        break;
                    case '4-2':
                        window.location.href="http://citytsg.dlut.edu.cn/index.htm";
                        break;
                    case '4-3':
                        window.location.href="http://cityftp.dlut.edu.cn/index.htm";
                        break;
                    case '4-4':
                        window.location.href="http://172.30.2.66/vod/action/indexListAction.do?method=indexShow";
                        break;
                    case '4-5':
                        window.location.href="http://tv.byr.cn/show";
                        break;
                    }
                },
                getUserInfoByName(name){
                	var _this=this;
                	$.ajax({
                		url:'userinfobyname',
                		type:'get',
                		data:{
                			name:name
                		},
                		dataType:'json',
                		success:function(data){
                			_this.userInfo=data;
                		}
                	});
                }
            }
        })
    </script>
    <style>
        .card{
            width: 80%;
            margin: 0 auto;
            padding: 10px;
        }
        .el-tabs{
            width: 80%;
            margin: 0 auto;
        }
        .el-row{
            height: 85px;
        }
        .el-col{
            line-height: 85px;
        }
        .el-divider{
            margin: 8px 0px;
        }
        .bobut{
            width: 100%;
        }
        .headdiv{
            width:85px;
            height:85px;
        }
    </style>
</body>
</html>